<template>
  {{ person }}
  <div>姓名：{{ name }}</div>
  <div>年龄：{{ age }}</div>
  <div>工作：{{ nature }} - {{ salary }} k</div>
  <div>{{ dataJ.y }}</div>
  <button @click="name += '~'">name change</button>
  <button @click="age++">age change</button>
  <button @click="salary++">salary change</button>
  <button @click="dataJ.y++">dataJ change</button>
</template>

<script>
import { shallowReactive, shallowRef, toRef, toRefs } from 'vue'
export default {
  name: 'shallow',
  setup() {
    const person = shallowReactive({
      name: '张三',
      age: 18,
      job: {
        nature: 'web',
        salary: 20
      }
    })
    const dataJ = shallowRef({
      y: 0
    })
    return {
      person,
      name: toRef(person, 'name'),
      age: toRef(person, 'age'),
      // nature: toRef(person.job, 'nature'),
      ...toRefs(person.job),
      dataJ
    }
  }
}
</script>

<style>

</style>